import { useImageStore } from '@/hooks/image'
import { EGraph, ERecorderBrashColor, ERecorderOperation } from '@/core/mediaRecorder'
import { message, Modal, UploadDragger, Upload } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import {
  computed,
  DebuggerEvent,
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  Ref,
  ref,
  toRaw,
  watch,
  getCurrentInstance,
} from 'vue'
import Styles from './index.module.less'
import { ctrlAddZ } from '@/utils/domTool'
import { FileType, UploadChangeParam, UploadFile } from 'ant-design-vue/lib/upload/interface'
import ColorTool from './colorTool'
export default defineComponent({
  name: 'ToolPage',
  setup() {
    /**图像工具 */
    const store = useImageStore()
    const activeManage = computed(() => store.state.activeManage)

    const toolActiveCss = ref(' text-red-600 ')
    /**图像url */
    const imageUrl = ref('')
    const active = computed(() => (status: ERecorderOperation) => {
      return store.state.activeManage?.operat === status
    })
    /**computed 无法刷新页面bug */
    const { ctx: that } = getCurrentInstance() as any

    const toolActive = computed(
      () => (status: ERecorderOperation) => activeManage.value?.operat == status,
    )

    const setImage = () => {
      Modal.confirm({
        title: '添加图片',
        width: '480px',
        closable: true,
        icon: () => <span></span>,
        okText: '确定',
        wrapClassName: 'media-record-toolPage-modal',
        cancelText: '取消',
        onOk: () => {
          if (imageUrl.value != '') {
            activeManage.value?.setUploadImage()
            activeManage.value?.setImage(imageUrl.value, 'imageUpload')
          } else {
            message.info('未选择上传照片')
          }
        },
        onCancel: () => {},
        content: () => (
          <div
            class={
              ' pb-3 pt-3 border-b border-t border-gray-EEEEEF border-solid' +
              (imageUrl.value == '' ? '' : ' pb-20')
            }
            style={{ height: '300px' }}
          >
            <UploadDragger
              maxCount={1}
              listType={'picture'}
              customRequest={(op) => {
                if (op.onSuccess) op.onSuccess({}, undefined)
              }}
              onRemove={() => {
                imageUrl.value = ''
                // that.$forceUpdate();
              }}
              multiple={false}
              beforeUpload={(file: FileType) => {
                const isPNG = file.type === 'image/png'
                const isJPG = file.type === 'image/jpg'
                const isJPEG = file.type === 'image/jpeg'
                if (!isPNG && !isJPEG && !isJPG) {
                  message.error(`${file.name} 上传图像只支持 png jpg jpeg 格式。`)
                  return Upload.LIST_IGNORE
                } else if (file.size > 5 * 1048576) {
                  message.error(`${file.name} 上传图像超过5M。`)
                  return Upload.LIST_IGNORE
                } else {
                  return true
                }
              }}
              onChange={(param: UploadChangeParam<UploadFile<any>>) => {
                if (param.file.status === 'removed') {
                  return
                }
                param.file.status = 'success'
                imageUrl.value = window.URL.createObjectURL(param.file.originFileObj!)
              }}
            >
              <div class={'w-full h-full flex flex-col justify-center'}>
                <p class="text-4xl inline-block pb-3">
                  {' '}
                  <i class={'iconfont icon-icon_upload  '}></i>
                </p>
                <p class="inline-block text-base font-medium-family font-medium text-gray-20222E pb-3">
                  点击或拖拽图片到此区域上传
                </p>
                <p
                  class="inline-block  text-sm font-regular font-normal"
                  style={{ color: '#A6A7AB' }}
                >
                  文件格式jpeg/png ，并且不超过5M
                </p>
              </div>
            </UploadDragger>
          </div>
        ),
      })
    }
    const startBush = () => {
      if (active.value(ERecorderOperation.brush)) {
        activeManage.value?.flyback()
      } else {
        activeManage.value?.flyback()
        activeManage.value?.brush()
      }
      that.$forceUpdate()
    }
    onMounted(() => {
      window.addEventListener('keydown', keyDown)
    })

    const keyDown = (e: any) => {
      ctrlAddZ(e, () => {
        activeManage.value?.flyback()
        activeManage.value?.backspacing()
        that.$forceUpdate()
      })
    }
    onUnmounted(() => {
      window.removeEventListener('keydown', keyDown)
    })

    /**ui工具 */
    return () => (
      <>
        <div class="w-full h-auto pt-5 pb-5  bg-white font-regular ">
          <div class={Styles['tool']}>
            <div
              class={
                Styles['bar'] +
                (toolActive.value(ERecorderOperation.brush) ? toolActiveCss.value : '')
              }
              onClick={startBush}
            >
              <i class={'iconfont icon-icon_draw_scrawl'}></i>
              <span>涂鸦</span>
            </div>
            <div
              class={Styles['bar']}
              onClick={() => {
                if (active.value(ERecorderOperation.image)) {
                  activeManage.value?.flyback()
                } else {
                  activeManage.value?.flyback()
                  setImage()
                }
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_pic'}></i>
              <span>图像</span>
            </div>
            <div
              class={Styles['bar']}
              onClick={() => {
                activeManage.value?.flyback()
                activeManage.value?.setText()
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_text'}></i>
              <span>文字</span>
            </div>
            <div
              class={Styles['bar']}
              onClick={() => {
                Modal.confirm({
                  title: (
                    <span class={'leading-6 flex flex-row justify-start items-center'}>
                      <i
                        class={' iconfont icon-feedback_warning text-2xl mr-2 '}
                        style={{ color: '#FFA600' }}
                      ></i>
                      <span class={' font-medium-family text-base font-medium  '}>
                        是否清除屏幕所有的痕迹
                      </span>
                    </span>
                  ),
                  class: Styles['rounded-lg'],
                  width: '340px',
                  closable: true,
                  icon: () => <span></span>,
                  okText: '确定清屏',
                  cancelText: () => <span class={'pr-3 pl-3'}>取消</span>,
                  onOk: () => {
                    activeManage.value?.flyback()
                    activeManage.value?.clearAll()
                    that.$forceUpdate()
                  },
                })
              }}
            >
              <i class={'iconfont icon-icon_draw_clear'}></i>
              <span>清屏</span>
            </div>

            <div
              class={
                Styles['bar'] +
                (toolActive.value(ERecorderOperation.line) ? toolActiveCss.value : '')
              }
              onClick={() => {
                if (active.value(ERecorderOperation.line)) {
                  activeManage.value?.flyback()
                } else {
                  activeManage.value?.flyback()
                  activeManage.value?.drawGraph(EGraph.line)
                }
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_line'}></i>
              <span>直线</span>
            </div>
            <div
              class={
                Styles['bar'] +
                (toolActive.value(ERecorderOperation.circle) ? toolActiveCss.value : '')
              }
              onClick={() => {
                if (active.value(ERecorderOperation.circle)) {
                  activeManage.value?.flyback()
                } else {
                  activeManage.value?.flyback()
                  activeManage.value?.drawGraph(EGraph.circle)
                }
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_circle'}></i>
              <span>圆形</span>
            </div>
            <div
              class={
                Styles['bar'] +
                (toolActive.value(ERecorderOperation.triangle) ? toolActiveCss.value : '')
              }
              onClick={() => {
                if (active.value(ERecorderOperation.triangle)) {
                  activeManage.value?.flyback()
                } else {
                  activeManage.value?.flyback()
                  activeManage.value?.drawGraph(EGraph.triangle)
                }
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_triangle'}></i>
              <span>三角形</span>
            </div>
            <div
              class={
                Styles['bar'] +
                (toolActive.value(ERecorderOperation.rectangle) ? toolActiveCss.value : '')
              }
              onClick={() => {
                if (active.value(ERecorderOperation.rectangle)) {
                  activeManage.value?.flyback()
                } else {
                  activeManage.value?.flyback()
                  activeManage.value?.drawGraph(EGraph.rectangle)
                }
                that.$forceUpdate()
              }}
            >
              <i class={'iconfont icon-icon_draw_rectangle '}></i>
              <span>长方型</span>
            </div>
          </div>
        </div>
        <ColorTool></ColorTool>
      </>
    )
  },
})
